<!--暂时取消主体切换功能-->
<!--<script src="StaticResource/AmazeUI/js/theme.js"></script>-->
<!--
	作者：sheypang@163.com
	时间：2018-05-10
	描述：自己写的表格排序插件  
	-------------------Start-----------------------
-->
<link rel="stylesheet" href="StaticResource/Plugins/Grid/grid.css" />
<script>
	var row_id;
	//新增
	$("#add").click(function() {
		//LoadContent("User/form");
		$("#ContentArea").HttpLoad("User/form", null, function() {});
	});
	
	//编辑
	$("#edit").click(function() {
		//LoadContent("User/form");
		if(row_id==null){
			Msg("请选中一行",2);
			return false;
		}
		$("#ContentArea").HttpLoad("User/form", {"id":row_id}, function() {
			
		});
	});
</script>
<script>
	$(function() {
		var options = {
			url:"User.json",
			rowclick:function(id){
				row_id = id;
			},
			colums:[
				{
					"Index":"name","Name":"用户名"
				},{
					"Index":"rolename","Name":"角色"
				},{
					"Index":"status","Name":"状态","formatter":{"1":"正常","0":"未激活"}
				},{
					"Index":"isActive","Name":"是否激活"
				},{
					"Index":"createTime","Name":"创建时间"
				},{
					"Index":"lastLogin","Name":"最后登录"
				}
			]
		}
		$("#table").grid(options);
		
		
	});
</script>
<!--
	--------------------end------------------------
-->

<!-- 内容区域 -->
<div class="row-content am-cf">
	<div class="row">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
			<div class="widget am-cf">
				<div class="widget-head am-cf">
					<div class="widget-title  am-cf">用户管理</div>
				</div>
				<div class="widget-body  am-fr">
					<div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
						<div class="am-form-group">
							<div class="am-btn-toolbar">
								<div class="am-btn-group am-btn-group-xs">
									<button id="add" type="button" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</button>
									<button id="edit" type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 编辑</button>
									<button id="delete" type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button>
								</div>
							</div>
						</div>
					</div>
					<div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
						<div class="am-form-group tpl-table-list-select">
							<select data-am-selected="{btnSize: 'sm'}">
								<option value="option1">用户名</option>
								<option value="option2">角色</option>
							</select>
						</div>
					</div>
					<div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
						<div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
							<input type="text" class="am-form-field ">
							<span class="am-input-group-btn">
					            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button"></button>
					          </span>
						</div>
					</div>
					<div class="am-u-sm-12 am-scrollable-horizontal">
						<table id="table" width="100%" class="grid am-table am-table-compact am-table am-table-bordered am-text-nowrap am-scrollable-horizontal">
							<thead>
								<tr>
									<th>用户名</th>
									<th>角色</th>
									<th>状态</th>
									<th>是否激活</th>
									<th>创建时间</th>
									<th>最后登录</th>
								</tr>
							</thead>
							<tbody>
								<!--<tr class="gradeX">
									<td>sheypang</td>
									<td>管理员</td>
									<td>正常</td>
									<td>已激活</td>
									<td>2018-06-03</td>
									<td>2018-06-13</td>
									<td>
										<div class="tpl-table-black-operation">
											<a href="javascript:;">
												<i class="am-icon-pencil"></i> 编辑
											</a>
											<a href="javascript:;" class="tpl-table-black-operation-del">
												<i class="am-icon-trash"></i> 删除
											</a>
										</div>
									</td>
								</tr>-->
							</tbody>
						</table>
					</div>
					<div class="am-u-lg-12 am-cf">
						<div class="am-fr">
							<ul class="am-pagination tpl-pagination">
								<li class="am-disabled">
									<a href="#">«</a>
								</li>
								<li class="am-active">
									<a href="#">1</a>
								</li>
								<li>
									<a href="#">2</a>
								</li>
								<li>
									<a href="#">3</a>
								</li>
								<li>
									<a href="#">4</a>
								</li>
								<li>
									<a href="#">5</a>
								</li>
								<li>
									<a href="#">»</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>